<template>
  <div>
    <Breadcrumb :opt-data="ipadOptData"></Breadcrumb>
    <PageLayout>
      <div class="table-container height-100">
        <EZTable
          v-loading="tableLoading"
          :table-id="tableId"
          :table-hdl="tableHdl"
          :rows="ipadData"
          :custom-empty="true"
          @pageChanged="getIpadOptData"
          @sizeChanged="getIpadOptData"
          @filterChange="getIpadOptData">
          <EmptyContent slot="empty" :opt-data="ipadOptData"></EmptyContent>
        </EZTable>
      </div>
      <el-dialog
        :title="`${!isEditIpad ? '新增' : '编辑'}平板`"
        :visible.sync="showProjectDialog"
        :close-on-click-modal="false"
        width="600px"
        center>
        <el-form
          v-loading="ipadFormLoading"
          :ref="ipadFormRef"
          :model="ipadForm"
          :rules="ipadFormRules"
          size="small"
          label-width="130px">
          <el-form-item label="平板型号" prop="device">
            <el-input v-model="ipadForm.device" placeholder="请填写平板名称"></el-input>
          </el-form-item>
          <el-form-item label="分辨率宽" >
            <el-input-number v-model="ipadForm.window.width" controls-position="right"
                             class="width-100">
            </el-input-number>
          </el-form-item>
          <el-form-item label="分辨率高" >
            <el-input-number v-model="ipadForm.window.height" controls-position="right"
                             class="width-100">
            </el-input-number>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="ipadForm.remark" placeholder="请填写备注"></el-input>
          </el-form-item>
          <div class="text-align-right">
            <el-form-item>
              <el-button size="medium" @click="ipadFormCanceled">取消</el-button>
              <el-button size="medium" type="primary" @click="ipadFormSubmitted">提交</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
    </PageLayout>
  </div>
</template>
<script>
  import {tableIdConfig, tableOptBtnConfig} from '@/config/table';
  import {msgCode} from "@/config/string";
  import {confirmHandle, deepCopyWithJson, messageHandle} from "@/utils";
  import {assembleTableOptBtn, getTableConfig, TableStateHdl} from "@/modules/routeParamStateHdl";
  import ipadTableCfg from "@/config/table/ipad";
  import EZTable from '@/components/table/EZTable';

  export default {
    name: "IpadManagement",
    components: {
      EZTable
    },
    data() {
      return {
        tableLoading: true,
        tableId: tableIdConfig.ipad,
        tableHdl: null,
        ipadData: [],
        showProjectDialog: false,
        ipadFormLoading: false,
        ipadForm: {
          window: {
            width:1024,
            height:768
          },
        },
        ipadFormRules: {
          device: [
            {required: true, message: '请填写平板型号', trigger: 'blur'}
          ],
        },
        ipadFormRef: 'ipadFormRef',
        isEditIpad: false,
      }
    },
    computed: {
      ipadOptData() {
        return [
          {
            type: 'btn',
            label: '新增平板',
            icon: 'icon-tianjia',
            callback: () => {
              this.clickCreateBtn();
            }
          }
        ];
      }
    },
    activated() {
      this.initTableConfig();
      this.initIpadForm();
      this.getIpadOptData();
    },
    methods: {
      initTableConfig() {
        if (this.tableHdl) return;
        const {columns = [], filters = []} = getTableConfig(this.tableId, ipadTableCfg);
        assembleTableOptBtn(columns, ({type = '', data = {}}) => {
          if (!type) return;
          const ipad = deepCopyWithJson(data);
          switch (type) {
            case tableOptBtnConfig.edit.type:
              this.showProjectDialog = true;
              this.isEditIpad = true;
              this.ipadForm = ipad;
              break;
            case tableOptBtnConfig.delete.type:
              this.deleteProject(ipad);
              break;

            default:
              break;
          }
        });
        this.tableHdl = new TableStateHdl(this.$route.name, this.tableId, columns, filters);
      },
      initIpadForm() {
        this.ipadForm = {
          device: '',
          window: {
            width:1024,
            height:768
          },
          remark: '',
        }
      },
      resetProjectForm() {
        this.initIpadForm();
        const ipadForm = this.$refs[this.ipadFormRef];
        ipadForm && ipadForm.resetFields();
      },
      clickCreateBtn() {
        this.isEditIpad && this.resetProjectForm();
        this.showProjectDialog = true;
        this.isEditIpad = false;
      },
      getIpadOptData() {
        this.tableLoading = true;
        const selector = {};
        const tableParam = this.tableHdl.assembleTableParam();
        API.ipad.ipadList({...tableParam, selector}).then(result => {
          this.tableLoading = false;
          const {data = [], total = 0} = result;

          this.ipadData = data.map(room => {
            const {window = {}} = room;
            return {
              ...room,
              size: `<span class="font-color-success">${window.width} x ${window.height}</span>`,
            }
          });
          this.tableHdl.total = total;
        }).catch(err => {
          console.log('err', err)
          this.tableLoading = false;
        });
      },
      deleteProject(ipad = {}) {
        confirmHandle({label: `确定要删除平板：${ipad.device} 吗?`}).then(() => {
          API.ipad.ipadDelete({_id: ipad._id}).then(result => {
            messageHandle({code: msgCode.DELETE_SUCCESS, title: '平板'});
            this.tableHdl.judgeTableMatched();
            this.getIpadOptData();
            this.resetProjectForm();
          });
        }).catch(() => {
        });
      },
      ipadFormCanceled() {
        this.showProjectDialog = false;
      },
      ipadFormSubmitted() {
        this.$refs[this.ipadFormRef].validate((valid) => {
          if (!valid) return;
          this.ipadFormLoading = true;
          if (!this.isEditIpad) {
            API.ipad.ipadAdd({...this.ipadForm}).then(result => {
              messageHandle({code: msgCode.ADD_SUCCESS, title: '平板成功'});
              this.showProjectDialog = false;
              this.ipadFormLoading = false;
              this.getIpadOptData();
              this.resetProjectForm();
            }).catch(err => {
              console.log('err', err);
              this.ipadFormLoading = false;
            });
          } else {
            delete this.ipadForm.size
            API.ipad.ipadEdit({...this.ipadForm}).then(result => {
              messageHandle({code: msgCode.EDIT_SUCCESS, title: '平板成功'});
              this.showProjectDialog = false;
              this.ipadFormLoading = false;
              this.getIpadOptData();
              this.resetProjectForm();
            }).catch(err => {
              console.log('err', err);
              this.ipadFormLoading = false;
            });
          }
        });
      },
    },
  }
</script>


<style scoped>

</style>
